<!-- 收款记录 -->
<template>
    <div>
        <div v-show="isShowChart">
        <div id="div1">
            <span>标题: </span>
            <el-input class="biank" v-model="biaoti_input" placeholder="请输入内容"></el-input>
            <span class="span">收款日期: </span>
             <el-select class="el" v-model="shoukuanqi_value" filterable placeholder="请选择">
             <el-option v-for="item in shoukuanqi_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
            <span class="span">项目名称: </span>
              <el-select class="el" v-model="xiangmuchen_value" clearable placeholder="请选择">
              <el-option v-for="item in xiangmuchen_option" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
              </el-select>
        </div>
        <div class="div2">
             <span>关联合同: </span>
             <el-select class="els" v-model="guanlianhe_value" filterable placeholder="请选择">
             <el-option v-for="item in guanlianhe_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
            <span class="spans">收款类型: </span>
             <el-select class="else" v-model="shoukuanlei_value" filterable placeholder="请选择">
             <el-option v-for="item in shoukuanlei_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
            <span class="spa">创建人: </span>
              <el-input class="biankan" v-model="chuangjian_input" placeholder="请输入内容"></el-input>
        </div>
        <div class="div2">
            <span>创建时间: </span>
             <el-select class="els" v-model="chuangjianshi_value" filterable placeholder="请选择">
             <el-option v-for="item in chuangjianshi_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
        </div>
        <div>
            <el-button class="anniu" type="primary">查询</el-button>
            <el-button>重置</el-button>
        </div>
        <el-button @click="fukuan" class="anniu" type="primary">新增付款记录</el-button>
        <el-button class="anniu" @click="guanli">收款类型管理</el-button>

        <!-- 表单 -->
        <el-table :cell-style="rowStyle" :data="tableData" border style="width: 100%" >
          <el-table-column header-align="center" prop="id" label="序号" width="50">
              <template slot-scope="scope">
                  {{ scope.$index + (pager.page - 1) * pager.pagerow + 1 }}
              </template>
          </el-table-column>
          <el-table-column header-align="center" prop="title" label="标题" width="150">
          </el-table-column>
          <el-table-column header-align="center" prop="tepy" label="收款类型">
          </el-table-column>
          <el-table-column header-align="center" prop="date" label="收款日期">
          </el-table-column>
          <el-table-column header-align="center" prop="amount" label="收款金额(万)">
          </el-table-column>
           <el-table-column header-align="center" prop="project" label="所属项目">
          </el-table-column>
           <el-table-column header-align="center" prop="contract" label="关联合同">
          </el-table-column>
          <el-table-column header-align="center" prop="creator" label="创建人">
          </el-table-column>
          <el-table-column header-align="center" prop="dates" label="创建日期">
          </el-table-column>
          <el-table-column header-align="center" label="操作" width="200">
              <template>
                <el-button class="src" type="text" size="small">编辑</el-button>
                <el-button class="src" type="text" size="small">删除</el-button>
                <el-button class="src" type="text" size="small" @click="xiangqing">查看详情</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" @current-change='handelCurrentPage' :current-page='currentPage' :page-size="pageSize" :total="total">
        </el-pagination>
        </div>


        <!-- 新增付款记录页面 -->
        <div class="waik" v-show="isShowTable">
            <div class="ul">
              <ul>
                  <li>
                      <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                      <span>收款类型: </span>
                      <el-select class="select" v-model="soukuanlei_value" filterable placeholder="项目合同收款">
                      <el-option v-for="item in soukuanlei_option" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                      </el-select>
                  </li>
                  <li>
                      <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                      <span>关联合同: </span>
                      <el-select class="select" v-model="hetong_value" filterable placeholder="苏州地铁项目施工班组合同">
                      <el-option v-for="item in hetong_option" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                      </el-select>
                  </li>
                  <li>
                      <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                      <span>关联项目: </span>
                      <el-select :disabled="true" class="select" v-model="value" filterable placeholder="苏州地铁项目">
                      <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                      </el-select>
                  </li>
                  <li>
                      <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                      <span>收款日期: </span>
                      <el-select class="select" v-model="soukuanqi_value" filterable placeholder="2021-08-08">
                      <el-option v-for="item in soukuanqi_option" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                      </el-select>
                  </li>
                  <li>
                      <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                      <span>收款金额: </span>
                      <el-input class="select" v-model="soukuane_input" placeholder="请输入"></el-input>
                  </li>
                  <li>
                      <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                      <span>收款凭证: </span>
                      <div class="tup"></div>
                  </li>
                  <li>
                      <span>付款备注: </span>
                      <div class="div4">
                      <el-input
                        class="el-input"
                        type="textarea"
                        :rows="7"
                        placeholder="请输入"
                        v-model="fukuan_textarea">
                      </el-input>
                      </div>
                  </li>
              </ul>
          </div>
          <el-button @click="baocun" class="an" type="primary">保存</el-button>
          <el-button @click="qux" class="an">取消</el-button>
        </div>

        <!-- 查询详情页面 -->
        <div class="waik" v-show="isShowTablet">
            <div class="ul">
                <ul>
                    <li>
                        <span>收款类型: </span>
                        <span>项目合同收款</span>
                    </li>
                    <li>
                        <span>关联合同: </span>
                        <span class="a"><a href="">苏州地铁项目合同</a></span>
                    </li>
                    <li>
                        <span>关联项目: </span>
                        <span>苏州地铁项目</span>
                    </li>
                    <li>
                        <span>收款日期: </span>
                        <span>2021-08-15</span>
                    </li>
                    <li>
                        <span>收款金额: </span>
                        <span>30万</span>
                    </li>
                    <li>
                        <span>收款凭证: </span>
                        <div class="tup"></div>
                    </li>
                    <li>
                        <span>付款备注: </span>
                      <div class="div4">
                      <el-input
                        class="el-input"
                        type="textarea"
                        :rows="7"
                        placeholder="请输入"
                        v-model="beizu_textarea">
                      </el-input>
                      </div>
                    </li>
                </ul>
            </div>
            <el-button @click="fh" class="an">返回</el-button>
        </div>

        <!-- 收款类型管理页面 -->
        <div class="waik" v-show="isShowTabled">
        <el-button class="anniu" type="primary">新增付款记录</el-button>

        <el-table :cell-style="rowStyle" :data="nowData" border style="width: 100%" >
          <el-table-column header-align="center" prop="id" label="序号" width="50">
              <template slot-scope="scope">
                  {{ scope.$index + (pagers.pages - 1) * pagers.pagerows + 1 }}
              </template>
          </el-table-column>
          <el-table-column header-align="center" prop="type" label="收款类型">
          </el-table-column>
          <el-table-column header-align="center" prop="name" label="创建人">
          </el-table-column>
          <el-table-column header-align="center" prop="createDate" label="创建日期">
          </el-table-column>
          <el-table-column header-align="center" label="操作">
              <template>
                <el-button class="src" type="text" size="small">编辑</el-button>
                <el-button class="src" type="text" size="small">删除</el-button>
              </template>
          </el-table-column>
        </el-table>

        <!-- 收款类型管理分页 -->
       <el-pagination background layout="prev, pager, next" @current-change='collectionCurrentPage' :current-page='currents' :page-size="pagew" :total="totals">
       </el-pagination>
            <el-button @click="fanh" class="an">返回</el-button>
        </div>
    </div>
</template>

<script>
export default { 
//import引入的组件需要注入到对象中才能使用
components: {
},
//监听属性 类似于data概念
computed:{},
data() {
//这里存放数据
return {
    biaoti_input: '',
    chuangjian_input: '',
    //新增付款记录输
    soukuane_input: '',
    fukuan_textarea: '',
    beizu_textarea: '',

    isShowChart: true,
    isShowTable: false,
    isShowTablet: false,
    isShowTabled: false,

    tableData:[],
    nowData:[],
    //收款记录选输框
    shoukuanqi_option: [{
          value: '选项1',
          label: '请选择'
        }],
        shoukuanqi_value: '',
    xiangmuchen_option: [{
          value: '选项1',
          label: '请选择'
        }],
        xiangmuchen_value: '',
    guanlianhe_option: [{
          value: '选项1',
          label: '请选择'
        }],
        guanlianhe_value: '',
    shoukuanlei_option: [{
          value: '选项1',
          label: '请选择'
        }],
        shoukuanlei_value: '',
    chuangjianshi_option: [{
          value: '选项1',
          label: '请选择'
        }],
        chuangjianshi_value: '',
    //新增付款记录选输框
    soukuanlei_option: [{
          value: '选项1',
          label: '项目合同收款'
        }],
        soukuanlei_value: '',
    hetong_option: [{
          value: '选项1',
          label: '苏州地铁项目施工班组合同'
        }],
        hetong_value: '',
    option: [{
          value: '选项1',
          label: '苏州地铁项目'
        }],
        value: '',
    soukuanqi_option: [{
          value: '选项1',
          label: '2021-08-08'
        }],
        soukuanqi_value: '',      
    
    //表格序号自动生成
    pager: {
     page: 1, // 当前页
     pagerow: 3 // 每页展示条数
    },
    //收款类型表格序号自动生成
    pagers: {
     pages: 1, // 当前页
     pagerows: 3 // 每页展示条数
    },
    //收款记录分页
    currentPage: 1,
    pageSize: 3,
    total: 1,
    //收款类型管理分页
    currents:1, //当前页
    pagew:3,   //一页显示几条
    totals:1,  //总条数


};
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    //收款记录获取数据
    getCollection(){
       this.$axios({
            url: '/MakeRecord/selectForPage',
            method: 'get',
            params: {
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }
        }).then(res =>{
            //console.log(res);
            if(res.data.code == 200){
                this.tableData = res.data.data
                this.currentPage=res.data.total
            }
        })
   },
   //更改当前页
   handelCurrentPage(index){
        this.currentPage=index;
        this.getCollection()
    },

    //收款类型管理页获取数据
    getTtepy(){
        this.$axios({
            url: '/payType/selectForPage',
            method: 'get',
            params: {
                page: this.currents
            }
        }).then(res =>{
            console.log(res);
            if(res.data.code == 200){
                this.nowData = res.data.data
                this.currents=res.data.totals
            }
        })
    },
     collectionCurrentPage(index){
        this.currents=index;
        this.getTtepy()
    },




    //表内容居中
    rowStyle(){
        return "text-align:center"
    },
    //新增付款管理页面
    fukuan(){

        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
    qux(){
         if (this.isShowChart) {
          this.message = "切换图表";
        } else {
          this.message = "切换表格";
        }
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
     baocun(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
    //查看详情页面
    xiangqing(){
        this.isShowChart = !this.isShowChart;
        this.isShowTablet = !this.isShowTablet;
    },
    fh(){
        this.isShowChart = !this.isShowChart;
        this.isShowTablet = !this.isShowTablet;
    },
    //付款类型管理页面
    guanli(){
        this.isShowChart = !this.isShowChart;
        this.isShowTabled = !this.isShowTabled;
    },
    fanh(){
        this.isShowChart = !this.isShowChart;
        this.isShowTabled = !this.isShowTabled;
    },
    
},
//获取后端数据
getData(){
},

//生命周期 - 创建完成（可以访问当前this实例）
created() {
    //console.log(this.tableData);
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.getCollection();
    this.getTtepy();
},
}
</script>
<style lang='less' scoped>
#div1{
    margin-top: 80px;
}
.div2{
    margin-top: 20px;
}
.anniu{
    margin-top: 20px;
    margin-bottom: 20px;
}
.src{
    font-size: 14px;
}
.biank{
    width: 221.4px;
    margin-left: 40PX;
}
.span{
    margin-left: 20px;
}
.el{
    margin-left: 50px;
}
.els{
    margin-left: 8px;
}
.else{
    margin-left: 50px;
}
.spans{
    margin-left: 20px;
}
.spa{
    margin-left: 35px;
}
.biankan{
    width: 221.4px;
    margin-left: 50px;
}
.waik{
    width: 80%;
    margin-top: 80px;
    margin-left: 100px;
}
.ul>ul>li{
    list-style: none;
    padding: 15px 0;
}
.select{
    width: 350px;
    margin-left: 30px;
}
.tup{
     width: 160px;
    height: 250px;
    background-color: #F2F2F2;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: -20px;
}
.div4{
    width: 400px;
    margin-left: 100px;
    margin-top: -15px;
    margin-bottom: 30px;
}
.a>a{
    text-decoration: none;
    color: #307DFF;
}
</style>